<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>虎牙-弹幕页面</title>
  <meta name="robots" content="all" />
  <meta name="keywords" content="本地,websocket,测试工具" />
  <meta name="description" content="本地,websocket,测试工具" />
  <style>
    .btn-group{
      display: inline-block;
    }
  </style>
</head>
<body>
<h1>欢迎访问虎牙直播弹幕获取页面。在下面通信地址中输入虎牙直播id</h1>
<input type='text' value='' placeholder="请输入虎牙直播房间号" class="form-control" style='width:390px;display:inline'
       id='wsaddr' />
<div class="btn-group" >
  <button type="button" class="btn btn-default" onclick='addsocket();'>连接</button>
  <button type="button" class="btn btn-default" onclick='closesocket();'>断开</button>
  <button type="button" class="btn btn-default" onclick='closesocketPlus();'>强制断开连接</button>
  <button type="button" class="btn btn-default" onclick='$("#wsaddr").val("")'>清空</button>
  <button type="button" class="btn btn-default" onclick='toPageList()'>去弹幕列表查看</button>

</div>
<div class="row">
  <div id="output" style="border:1px solid #ccc;height:365px;overflow: auto;margin: 20px 0;"></div>
  <input type="text" id='message' class="form-control" style='width:810px' placeholder="待发信息" onkeydown="en(event);">
  <span class="input-group-btn">
				<button class="btn btn-default" type="button" onclick="doSend();">发送</button>
			</span>
</div>
</div>
</body>

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script language="javascript" type="text/javascript">
  var url = "localhost";
  function formatDate(now) {
    var year = now.getFullYear();
    var month = now.getMonth() + 1;
    var date = now.getDate();
    var hour = now.getHours();
    var minute = now.getMinutes();
    var second = now.getSeconds();
    return year + "-" + (month = month < 10 ? ("0" + month) : month) + "-" + (date = date < 10 ? ("0" + date) : date) +
            " " + (hour = hour < 10 ? ("0" + hour) : hour) + ":" + (minute = minute < 10 ? ("0" + minute) : minute) + ":" + (
                    second = second < 10 ? ("0" + second) : second);
  }
  var output;
  var websocket;

  function init() {
    output = document.getElementById("output");
    testWebSocket();
  }

  function addsocket() {
    var wsaddr = $("#wsaddr").val();
    if (wsaddr == '') {
      alert("请填写B站的直播房间号!");
      return false;
    }
    var timestamp = Date.parse(new Date());
    wsaddr = "ws://"+url+":8081/dm/hy/"+wsaddr+"/"+timestamp;
    StartWebSocket(wsaddr);
  }

  function closesocket() {
    websocket.close();
  }
  function closesocketPlus() {
    var wsaddr = $("#wsaddr").val();
    if (wsaddr == '') {
      alert("请填写直播房间号!");
      return false;
    }
    window.location.href = "http://"+url+":8081/close?type=hy&roomId="+wsaddr;
  }
  function toPageList() {
    window.location.href = "http://"+url+":8081/barrage-log/list?pn=1&typeCode=hy";
  }
  function StartWebSocket(wsUri) {
    websocket = new WebSocket(wsUri);
    websocket.onopen = function(evt) {
      onOpen(evt)
    };
    websocket.onclose = function(evt) {
      onClose(evt)
    };
    websocket.onmessage = function(evt) {
      onMessage(evt)
    };
    websocket.onerror = function(evt) {
      onError(evt)
    };
  }

  function onOpen(evt) {
    writeToScreen("<span style='color:red'>连接成功，现在你可以发送信息啦！！！</span>");
  }

  function onClose(evt) {
    writeToScreen("<span style='color:red'>websocket连接已断开!!!</span>");
    websocket.close();
  }

  function onMessage(evt) {
    writeToScreen('<span style="color:blue">服务端回应&nbsp;' + formatDate(new Date()) + '</span><br/><span class="bubble">' +
            evt.data + '</span>');
  }

  function onError(evt) {
    writeToScreen('<span style="color: red;">发生错误:</span> ' + evt.data);
  }

  function doSend() {
    var message = $("#message").val();
    if (message == '') {
      alert("请先填写发送信息");
      $("#message").focus();
      return false;
    }
    if (typeof websocket === "undefined") {
      alert("websocket还没有连接，或者连接失败，请检测");
      return false;
    }
    if (websocket.readyState == 3) {
      alert("websocket已经关闭，请重新连接");
      return false;
    }
    console.log(websocket);
    $("#message").val('');
    writeToScreen('<span style="color:green">你发送的信息&nbsp;' + formatDate(new Date()) + '</span><br/>' + message);
    websocket.send(message);
  }

  function writeToScreen(message) {
    var div = "<div class='newmessage'>" + message + "</div>";
    var d = $("#output");
    var d = d[0];
    var doScroll = d.scrollTop == d.scrollHeight - d.clientHeight;
    $("#output").append(div);
    if (doScroll) {
      d.scrollTop = d.scrollHeight - d.clientHeight;
    }
  }


  function en(event) {
    var evt = evt ? evt : (window.event ? window.event : null);
    if (evt.keyCode == 13) {
      doSend()
    }
  }
</script>

</html>
